<template>
  <div>
    <v-content-layout v-model:searchForm="searchForm" @search="search">
      <template #searchFold>
        <v-search-item label="手机号码">
          <a-input v-model:value="searchForm.phone" placeholder="请输入应用路径" />
        </v-search-item>
        <v-search-item label="用户名称">
          <a-input v-model:value="searchForm.userName" placeholder="请输入应用名称" />
        </v-search-item>
        <v-search-item label="用户昵称">
          <a-input v-model:value="searchForm.nickName" placeholder="请输入应用编号" />
        </v-search-item>
      </template>
      <template #handleBtn>
        <a-button type="primary" @click="addUser">添加</a-button>
      </template>
      <template v-slot:table="{ height }">
        <v-table :height="height" :pagination="false" :listData="listData" :columns="tableColumns">
          <template v-slot:operation="{ record }">
            <v-text-button type="link" @click="distributeRole(record)">分配角色</v-text-button>
            <v-text-button type="link" @click="editUser(record)">编辑</v-text-button>
            <v-text-button type="link" @click="deleteUser(record)">删除</v-text-button>
          </template>
        </v-table>
      </template>
      <template #pagination>
        <v-pagination
          :total="total"
          v-model:current="searchForm.currentNum"
          v-model:pageSize="searchForm.pageSize"
          @change="getList"
          @showSizeChange="getList"
        ></v-pagination>
      </template>
    </v-content-layout>
    <!--  弹框组件  -->
    <add v-if="addVisible" v-model:visible="addVisible" :init-form="editForm" @close="getList"></add>

    <!--  角色分配  -->
    <distribute
      v-if="distributeVisible"
      v-model:visible="distributeVisible"
      :user-id="userId"
      @close="getList"
    ></distribute>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'system-user'
  }
</script>
<script setup lang="ts">
import { tableColumns } from './config';
import { ref, reactive, onMounted } from 'vue';
import add from './add.vue'
import distribute from './distribute.vue'
import useCurrentInstance from 'lib-utils/vueInstance'
const { proxy } = useCurrentInstance()

let total = ref(0)
let addVisible = ref(false)
let distributeVisible = ref(false)
let userId = ref('')
let editForm = ref(null)
const searchForm = reactive({
  currentNum: 1,
  pageSize: 10,
  phone: '',
  userName: '',
  nickName: ''
})
let listData = ref([])

onMounted(() => {
  getList()
})

const getList = () => {
  proxy.$http.get(proxy.$api.user.list, searchForm).then(res => {
    listData.value = res.dataList
    total.value = res.total
  }).catch(() => {
  })
}

const search = () => {
  getList()
}

const addUser = () => {
  editForm.value = null
  addVisible.value = true
}


const editUser = (record:any) => {
  editForm.value = record
  addVisible.value = true
}

const deleteUser = (record:any) => {
  proxy.$http.post(proxy.$api.user.delete, {
    id: record.id
  }).then(() => {
    getList()
  }).catch(()=> {
  })
}

// 分配角色
const distributeRole = (record:any) => {
  userId.value = record.id
  distributeVisible.value = true
}
</script>

<style lang="less" scoped></style>